React Transition Group 상태 머신: 애니메이션 상태 관리 마스터하기

애니메이션은 웹 애플리케이션의 사용자 경험을 크게 향상시켜 시각적 피드백을 제공하고 상호작용을 더욱 매력적으로 만듭니다. 하지만 특히 동적인 React 애플리케이션 내에서 복잡한 애니메이션 상태를 관리하는 것은 금방 어려워질 수 있습니다. 바로 이 지점에서 React Transition Group과 상태 머신의 조합이 매우 유용하다는 것이 증명됩니다. 이 글에서는 이러한 도구들을 활용하여 견고하고, 유지보수 가능하며, 선언적인 애니메이션 로직을 만드는 방법을 깊이 있게 다룹니다.

핵심 개념 이해하기

React Transition Group이란 무엇인가?

React Transition Group(RTG)은 그 자체로 애니메이션 라이브러리가 아닙니다. 대신, 컴포넌트가 DOM에 들어오고 나가는 전환 과정을 관리하는 데 도움을 주는 컴포넌트를 제공합니다. 이는 CSS 전환, CSS 애니메이션 또는 JavaScript 애니메이션을 트리거하는 데 사용할 수 있는 생명주기 훅을 노출합니다. 즉, 컴포넌트가 *어떻게* 애니메이션을 적용해야 하는지가 아니라 *언제* 애니메이션을 적용해야 하는지에 초점을 맞춥니다.

React Transition Group의 주요 컴포넌트는 다음과 같습니다:

• <Transition>: 단일 자식 요소를 애니메이션하기 위한 기본 구성 요소입니다. `in` prop을 감시하여 enter, exit, appear 전환을 트리거합니다.
• <CSSTransition>: 전환 단계 동안 CSS 클래스를 추가하고 제거하는 편리한 컴포넌트입니다. 이는 CSS 전환이나 애니메이션을 통합하는 가장 간단한 방법인 경우가 많습니다.
• <TransitionGroup>: <Transition> 또는 <CSSTransition> 컴포넌트 집합을 관리합니다. 아이템 목록, 라우트 또는 다른 컴포넌트 컬렉션을 애니메이션하는 데 유용합니다.

상태 머신이란 무엇인가?

상태 머신은 시스템의 동작을 설명하는 계산의 수학적 모델입니다. 이는 유한한 수의 상태, 이러한 상태 간의 전환을 유발하는 이벤트, 그리고 이러한 전환 중에 발생하는 액션을 정의합니다. 상태 머신을 사용하면 복잡한 로직에 예측 가능성과 명확성을 부여할 수 있습니다.

상태 머신 사용의 이점은 다음과 같습니다:

• 코드 구성 개선: 상태 머신은 애플리케이션 로직을 관리하는 구조적인 접근 방식을 강제합니다.
• 예측 가능성 증가: 상태 전환이 명시적으로 정의되어 애플리케이션의 동작을 더 예측 가능하게 만들고 디버깅하기 쉽게 합니다.
• 테스트 용이성 향상: 상태 머신은 각 상태와 전환을 독립적으로 테스트할 수 있으므로 단위 테스트에 적합합니다.
• 복잡성 감소: 복잡한 로직을 더 작고 관리하기 쉬운 상태로 분해하여 애플리케이션의 전체적인 설계를 단순화할 수 있습니다.

JavaScript를 위한 인기 있는 상태 머신 라이브러리로는 XState, Robot, Machina.js 등이 있습니다. 이 글에서는 여러 라이브러리에 적용될 수 있는 일반적인 원칙에 초점을 맞추겠지만, 예제는 표현력과 기능 면에서 XState를 중심으로 설명할 수 있습니다.

React Transition Group과 상태 머신 결합하기

진정한 힘은 React Transition Group을 상태 머신과 함께 조율하는 데서 나옵니다. 상태 머신은 애니메이션의 전반적인 상태를 관리하고, React Transition Group은 현재 상태를 기반으로 실제 시각적 전환을 처리합니다.

사용 사례: 복잡한 전환을 가진 모달 창

다음과 같은 다양한 전환 상태를 지원하는 모달 창을 생각해 봅시다:

• Entering (진입 중): 모달이 화면에 나타나는 애니메이션이 진행 중입니다.
• Entered (진입 완료): 모달이 완전히 보입니다.
• Exiting (퇴장 중): 모달이 화면에서 사라지는 애니메이션이 진행 중입니다.
• Exited (퇴장 완료): 모달이 숨겨져 있습니다.

다음과 같은 상태를 도입하여 복잡성을 더할 수 있습니다:

• Loading (로딩 중): 모달이 표시되기 전에 데이터를 가져오고 있습니다.
• Error (오류): 데이터 로딩 중 오류가 발생했습니다.

이러한 상태들을 단순한 불리언(boolean) 플래그로 관리하는 것은 금방 다루기 힘들어질 수 있습니다. 상태 머신은 훨씬 더 깔끔한 해결책을 제공합니다.

XState를 사용한 구현 예제

다음은 XState를 사용한 기본 예제입니다:

```javascript import React, { useRef } from 'react'; import { useMachine } from '@xstate/react'; import { createMachine } from 'xstate'; import { CSSTransition } from 'react-transition-group'; import './Modal.css'; // Import your CSS file const modalMachine = createMachine({ id: 'modal', initial: 'hidden', states: { hidden: { on: { OPEN: 'entering', }, }, entering: { entry: 'logEntering', after: { 300: 'visible', // Adjust duration as needed }, }, visible: { on: { CLOSE: 'exiting', }, }, exiting: { entry: 'logExiting', after: { 300: 'hidden', // Adjust duration as needed }, }, }, actions: { logEntering: () => console.log('Entering modal...'), logExiting: () => console.log('Exiting modal...'), } }); function Modal({ children }) { const [state, send] = useMachine(modalMachine); const nodeRef = useRef(null); const isOpen = state.matches('visible') || state.matches('entering'); return ( <> send('OPEN')}>Open Modal

{children} send('CLOSE')}>Close Modal

); } export default Modal; ``` ```css /* Modal.css */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 1000; } .modal-content { background-color: white; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); } /* Transition Classes */ .modal-enter { opacity: 0; } .modal-enter-active { opacity: 1; transition: opacity 300ms ease-in-out; } .modal-exit { opacity: 1; } .modal-exit-active { opacity: 0; transition: opacity 300ms ease-in-out; } ```

설명:

• 상태 머신 정의: `modalMachine`은 상태(`hidden`, `entering`, `visible`, `exiting`)와 그들 사이의 전환(`OPEN` 및 `CLOSE` 이벤트에 의해 트리거됨)을 정의합니다. `after` 속성은 `entering` -> `visible` 및 `exiting` -> `hidden`으로 자동 전환하기 위해 지연 시간을 사용합니다.
• React 컴포넌트: `Modal` 컴포넌트는 `@xstate/react`의 `useMachine` 훅을 사용하여 상태 머신을 관리합니다.
• React Transition Group: `CSSTransition` 컴포넌트는 `isOpen` 불리언(상태 머신의 현재 상태에서 파생됨)을 감시합니다. CSS 전환을 트리거하기 위해 CSS 클래스(`modal-enter`, `modal-enter-active`, `modal-exit`, `modal-exit-active`)를 적용합니다.
• CSS 전환: CSS는 `opacity` 속성과 `transition` 속성을 사용하여 실제 애니메이션을 정의합니다.

이 접근 방식의 이점

• 관심사 분리: 상태 머신은 애니메이션 로직을 관리하고, React Transition Group은 시각적 전환을 처리합니다.
• 선언적 코드: 상태 머신은 원하는 상태와 전환을 정의하므로 코드를 더 쉽게 이해하고 유지보수할 수 있습니다.
• 테스트 용이성: 상태 머신은 독립적으로 쉽게 테스트할 수 있습니다.
• 유연성: 이 접근 방식은 더 복잡한 애니메이션과 상호작용을 처리하도록 확장할 수 있습니다.

고급 기술

상태 기반의 동적 전환

현재 상태에 따라 전환을 맞춤 설정할 수 있습니다. 예를 들어, 모달이 들어오고 나갈 때 다른 애니메이션을 사용하고 싶을 수 있습니다.

```javascript const modalMachine = createMachine({ id: 'modal', initial: 'hidden', context: { animationType: 'fade', }, states: { hidden: { on: { OPEN_FADE: { target: 'entering', actions: assign({ animationType: 'fade' }), }, OPEN_SLIDE: { target: 'entering', actions: assign({ animationType: 'slide' }), }, }, }, entering: { entry: 'logEntering', after: { 300: 'visible', // Adjust duration as needed }, }, visible: { on: { CLOSE: 'exiting', }, }, exiting: { entry: 'logExiting', after: { 300: 'hidden', // Adjust duration as needed }, }, }, actions: { logEntering: () => console.log('Entering modal...'), logExiting: () => console.log('Exiting modal...'), } }); function Modal({ children }) { const [state, send] = useMachine(modalMachine); const nodeRef = useRef(null); const isOpen = state.matches('visible') || state.matches('entering'); const animationType = state.context.animationType; let classNames = `modal ${animationType}` return ( <> send('OPEN_FADE')}>Open Modal (Fade) send('OPEN_SLIDE')}>Open Modal (Slide)

{children} send('CLOSE')}>Close Modal

); } ``` ```css /* Modal.css */ /*Existing CSS*/ /* Fade Animation */ .modal.fade-enter { opacity: 0; } .modal.fade-enter-active { opacity: 1; transition: opacity 300ms ease-in-out; } .modal.fade-exit { opacity: 1; } .modal.fade-exit-active { opacity: 0; transition: opacity 300ms ease-in-out; } /* Slide Animation */ .modal.slide-enter { transform: translateY(-100%); opacity: 0; } .modal.slide-enter-active { transform: translateY(0); opacity: 1; transition: transform 300ms ease-in-out, opacity 300ms ease-in-out; } .modal.slide-exit { transform: translateY(0); opacity: 1; } .modal.slide-exit-active { transform: translateY(-100%); opacity: 0; transition: transform 300ms ease-in-out, opacity 300ms ease-in-out; } ```

이 예제에서 `animationType`은 상태 머신의 컨텍스트에 저장됩니다. `OPEN_FADE`와 `OPEN_SLIDE` 이벤트는 이 컨텍스트를 업데이트하고, `Modal` 컴포넌트는 이 값을 사용하여 `CSSTransition` 컴포넌트의 `classNames` prop을 동적으로 구성합니다.

TransitionGroup으로 리스트 애니메이션하기

React Transition Group의 `TransitionGroup` 컴포넌트는 아이템 목록을 애니메이션하는 데 이상적입니다. 목록의 각 아이템은 `CSSTransition` 컴포넌트로 감쌀 수 있으며, `TransitionGroup`은 진입 및 퇴장 애니메이션을 관리합니다.

```javascript import React, { useState, useRef } from 'react'; import { TransitionGroup, CSSTransition } from 'react-transition-group'; import './List.css'; function List() { const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3']); const addItem = () => { setItems([...items, `Item ${items.length + 1}`]); }; const removeItem = (index) => { setItems(items.filter((_, i) => i !== index)); }; return ( ); } export default List; ``` ```css /* List.css */ .list-group { margin-top: 20px; } .list-item { background-color: #f0f0f0; padding: 10px; margin-bottom: 5px; border-radius: 5px; display: flex; justify-content: space-between; align-items: center; } .list-item-enter { opacity: 0; transform: translateX(-100%); } .list-item-enter-active { opacity: 1; transform: translateX(0); transition: opacity 300ms ease-in-out, transform 300ms ease-in-out; } .list-item-exit { opacity: 1; transform: translateX(0); } .list-item-exit-active { opacity: 0; transform: translateX(-100%); transition: opacity 300ms ease-in-out, transform 300ms ease-in-out; } ```

핵심 사항:

• 각 리스트 아이템은 `CSSTransition`으로 감싸여 있습니다.
• `CSSTransition`의 `key` prop은 React가 어떤 아이템이 추가되거나 제거되는지 식별하는 데 매우 중요합니다.
• `TransitionGroup`은 모든 자식 `CSSTransition` 컴포넌트의 전환을 관리합니다.

JavaScript 애니메이션 사용하기

CSS 전환이 컴포넌트를 애니메이션하는 가장 쉬운 방법인 경우가 많지만, 더 복잡한 효과를 위해 JavaScript 애니메이션을 사용할 수도 있습니다. React Transition Group은 GreenSock(GSAP)이나 Anime.js와 같은 라이브러리를 사용하여 JavaScript 애니메이션을 트리거할 수 있는 생명주기 훅을 제공합니다.

`classNames` 대신 `Transition` 컴포넌트의 `onEnter`, `onEntering`, `onEntered`, `onExit`, `onExiting`, `onExited` prop을 사용하여 애니메이션을 제어합니다.

글로벌 개발을 위한 모범 사례

글로벌 환경에서 애니메이션을 구현할 때는 접근성, 성능, 문화적 민감성과 같은 요소를 고려하는 것이 중요합니다.

접근성

• 사용자 선호도 존중: 사용자가 원할 경우 애니메이션을 비활성화할 수 있도록 허용합니다 (예: `prefers-reduced-motion` 미디어 쿼리 사용).
• 대안 제공: 애니메이션이 비활성화되더라도 모든 필수 정보가 여전히 전달되도록 보장합니다.
• 미묘한 애니메이션 사용: 과도하거나 산만하여 사용자를 압도하거나 멀미를 유발할 수 있는 애니메이션은 피합니다.
• 키보드 네비게이션: 모든 상호작용 요소가 키보드 네비게이션을 통해 접근 가능하도록 보장합니다.

성능

• 애니메이션 최적화: 부드러운 애니메이션을 위해 CSS transform과 opacity를 사용합니다. `width`나 `height`와 같은 레이아웃 속성을 애니메이션하는 것은 피합니다.
• 디바운싱 및 스로틀링: 사용자 입력에 의해 트리거되는 애니메이션의 빈도를 제한합니다.
• 하드웨어 가속 사용: 애니메이션이 브라우저에 의해 하드웨어 가속되는지 확인합니다.

문화적 민감성

• 고정관념 피하기: 애니메이션을 사용할 때 문화적 고정관념에 주의합니다.
• 포용적인 이미지 사용: 다양한 사용자를 대표하는 이미지를 선택합니다.
• 다양한 언어 고려: 애니메이션이 다른 언어 및 쓰기 방향(예: 오른쪽에서 왼쪽으로 쓰는 언어)에서도 올바르게 작동하는지 확인합니다.

일반적인 함정과 해결책

애니메이션이 트리거되지 않는 경우

문제: 컴포넌트가 진입하거나 퇴장할 때 애니메이션이 시작되지 않습니다.

해결책:

• 클래스 이름 확인: `CSSTransition`의 `classNames` prop에 사용된 CSS 클래스 이름이 CSS 파일에 정의된 클래스 이름과 일치하는지 확인합니다.
• 타임아웃 확인: `timeout` prop이 애니메이션이 완료되기에 충분히 긴지 확인합니다.
• DOM 검사: 브라우저의 개발자 도구를 사용하여 DOM을 검사하고 올바른 CSS 클래스가 적용되고 있는지 확인합니다.
• 리스트의 Key Prop 문제: 리스트를 애니메이션할 때, Transition 또는 CSSTransition 컴포넌트에 'key' prop이 없거나 고유하지 않으면 종종 문제가 발생합니다. 키가 리스트의 각 항목에 대한 안정적이고 고유한 식별자를 기반으로 하는지 확인하십시오.

애니메이션 버벅거림 또는 지연

문제: 애니메이션이 부드럽지 않고 버벅거리거나 지연되는 것처럼 보입니다.

해결책:

• CSS 최적화: 더 부드러운 애니메이션을 위해 CSS transform과 opacity를 사용합니다. 레이아웃 속성을 애니메이션하는 것은 피합니다.
• 하드웨어 가속: 애니메이션이 하드웨어 가속되는지 확인합니다.
• DOM 업데이트 줄이기: 애니메이션 중에 DOM 업데이트 횟수를 최소화합니다.

컴포넌트가 언마운트되지 않는 경우

문제: 퇴장 애니메이션이 완료된 후에도 컴포넌트가 언마운트되지 않습니다.

해결책:

• `unmountOnExit` 사용: 퇴장 애니메이션 후 컴포넌트가 언마운트되도록 `CSSTransition`의 `unmountOnExit` prop을 `true`로 설정합니다.
• 상태 머신 로직 확인: 애니메이션이 완료된 후 상태 머신이 `hidden` 또는 `exited` 상태로 올바르게 전환되는지 확인합니다.

결론

React Transition Group과 상태 머신을 결합하는 것은 React 애플리케이션에서 애니메이션 상태 관리에 대한 강력하고 유지보수 가능한 접근 방식을 제공합니다. 관심사를 분리하고, 선언적 코드를 사용하며, 모범 사례를 따르면 애플리케이션의 사용성과 매력을 향상시키는 매력적이고 접근성 높은 사용자 경험을 만들 수 있습니다. 전 세계 사용자를 위한 애니메이션을 구현할 때는 접근성, 성능, 문화적 민감성을 고려하는 것을 잊지 마십시오.

이러한 기술을 마스터하면 가장 복잡한 애니메이션 시나리오도 처리하고 진정으로 인상적인 사용자 인터페이스를 만들 수 있는 준비를 갖추게 될 것입니다.

추가 자료

• React Transition Group 문서
• XState 문서
• GreenSock (GSAP) 애니메이션 라이브러리
• Anime.js 애니메이션 라이브러리